<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/layui/css/layui.css'" media="all"/>
		<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/thesame.css'" media="all"/>
		<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/foodDelivery/css/rightCon.css'" media="all"/>
		<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/foodDelivery/css/page.css'" media="all"/>
		<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/foodDelivery/css/tree.css'" media="all"/>
		<style>
		</style>
	</head>

	<body class="layui-layout-body">
		<div class="layui-body">
			<div class="scroll-box bgWhite box-shadows border-radius4">
				<div class="scroll-box-con">
					<div class="mar25px">
						<div class="mb25px">
							<div class="add-mess add-mess-con add-mess-con-width">
								<div class="add-mess-child mr40px">
									<div>
										<label>关键字：</label>
									</div>
									<div class="add-mess-form">
										<p>
											<input type="text" id="search_nameInput" placeholder="请输入姓名关键字">
										</p>
									</div>
								</div>
								<div class="add-mess-child mr40px">
									<div>
										<label>起始日期：</label>
									</div>
									<div class="add-mess-form">
										<p>
											<input type="text" id="search_startDateInput" readonly placeholder="请选择起始日期" class="layui-time test-item cursor">
										</p>
									</div>
								</div>
								<div class="add-mess-child mr40px">
									<div>
										<label>截止日期：</label>
									</div>
									<div class="add-mess-form">
										<p>
											<input type="text" readonly id="search_endDateInput" placeholder="请选择截止日期" class="layui-time test-item cursor">
										</p>
									</div>
								</div>
								<div class="add-mess-child mr40px">
									<div>
										<label>村居范围：</label>
									</div>
									<div class="add-mess-form">
										<p class="add-mess-form-tree"><input type="hidden" id="search_orgIdInput" ><input type="text" readonly id="search_orgNameInput" placeholder="请选择村居范围" class="form-input cursor"></p>
										<div class="tree-con-box" hidden="hidden" id="org_div">

										</div>
									</div>
								</div>
							</div>
							<div style="clear: both"></div>
						</div>
						<nav class="layui-form more-date pb15px border-bot1px">
							<ul hidden="hidden">
								<li>
									<div>人员类别</div>
									<div class="selectDiv" id="userTypeDiv">
										<p data-val="">全部</p>
										<p data-val="1">在档</p>
										<p data-val="2">非档</p>
										<p data-val="3">工作人员</p>
									</div>
								</li>
								<li>
									<div>餐别</div>
									<div class="selectDiv" id="foodTypeDiv">
										<p data-val="">全部</p>
										<p data-val="1">午餐</p>
										<p data-val="2">晚餐</p>
									</div>
								</li>
								<li>
									<div>订单状态</div>
									<div class="selectDiv" id="orderStatusDiv">
										<p data-val="">全部</p>
										<p data-val="1">待配送</p>
										<p data-val="2">已配送</p>
									</div>
								</li>
							</ul>
							<div class="pt15px pb15px textRight">
								<p class="layui-btn cursor" id="searchButton">查&nbsp;询</p>
								<p class="layui-btn layui-btn-primary cursor" id="resetButton">重&nbsp;置</p>
								<p class="green cursor right lh32px ml25px btn-select"><span>展开</span><img src="../static/elderlyInfo/img/select_icon_down.png" class="ml10px"></p>
							</div>
						</nav>
						<div>
							<div class="lh32px overflow add-btn-input mt25px mb25px">
								<p class="right">
									<span>共有<em class="green fb ml5px mr5px" id="pageCount">0</em>条数据</span>
								</p>
							</div>
							<div class="border1px border-radius4 relative table-time">
								<table class="layui-hide" id="test" lay-filter="test"></table>
							</div>
						</div>
					</div>	
				</div>
			</div>
		</div>
		<script th:src="${#request.getContextPath()}+'/static/js/jquery-2.1.3.min.js'"></script>
		<script th:src="${#request.getContextPath()}+'/static/layui/layui.js'"></script>
		<script>
			var basePath = $("input#basePathInput",parent.document).val();
			layui.use(['element', 'laydate','table'], function() {
				var element = layui.element;
				var laydate = layui.laydate;
				var table = layui.table;
				$("input.test-item").each(function (i,v) {
					laydate.render({
						elem: this,
						trigger: 'click',
						done:function () {
							refresh();
						}
					});
				})


				$.ajax({
					url:"../org/getAllAuthTypeOrg",
					type:"post",
					dataType:"json",
					data:{"type":"3","userFlag":"yes"},
					success:function (result) {
						if(result.children && result.children.length > 0){
							let str = "";
							$.each(result.children,function(index,ao){
								str+='<div id="select_user_root_node" style="cursor: pointer" data-orgid="'+ao.orgId+'" data-orgname="'+ao.orgName+'" class="border-bot1px pl20px pr20px lh45px gray"><span class="mr10px">'+ao.orgName+'</span><span>无上级组织</span></div>';
								if(ao.isChildExist=='1' && ao.children && ao.children.length>0){
									str+='<ul class="tree-one">';
									$.each(ao.children,function(index,ao1){
										str+='<li>';
										str+='<div class="tree-children">';
										str+='<div>';
										if(ao1.isChildExist=='1'){
											str+='<p class="tree-arrow cursor"><img src="'+basePath+'/static/org/img/icon_select_down.png"></p>';
											str+='<p data-orgid="'+ao1.orgId+'">'+ao1.orgName+'</p>';
										}else{
											str+='<p style="margin-left:17px" data-orgid="'+ao1.orgId+'">'+ao1.orgName+'</p>';
										}
										str+='</div>';
										str+='</div>';
										if(ao1.isChildExist=='1' && ao.children!=null && ao.children.length>0){
											str+='<ul class="tree-two">';
											$.each(ao1.children,function(index,ao2){
												str+='<li>';
												str+='<div class="tree-children">';
												str+='<div>';
												if(ao2.isChildExist=='1'){
													str+='<p class="tree-arrow cursor"><img src="'+basePath+'/static/org/img/icon_select_down.png"></p>';
													str+='<p data-orgid="'+ao2.orgId+'">'+ao2.orgName+'</p>';
												}else{
													str+='<p style="margin-left:8px" data-orgid="'+ao2.orgId+'">'+ao2.orgName+'</p>';
												}
												str+='</div>'
												str+='</div>';
												if(ao2.isChildExist=='1' && ao2.children!=null && ao2.children.length>0){
													str+='<ul class="tree-three">';
													$.each(ao2.children,function(index,ao3){
														str+='<li>';
														str+='<div class="tree-children">';
														str+='<div>';
														if(ao3.isChildExist=='1'){
															str+='<p class="tree-arrow cursor"><img src="'+basePath+'/static/org/img/icon_select_down.png"></p>';
															str+='<p data-orgid="'+ao3.orgId+'">'+ao3.orgName+'</p>';
														}else{
															str+='<p style="margin-left:8px" data-orgid="'+ao3.orgId+'">'+ao3.orgName+'</p>';
														}
														str+='</div>'
														str+='</div>';
														if(ao3.isChildExist=='1' && ao3.children!=null && ao3.children.length>0){
															str+='<ul class="tree-four">';
															$.each(ao3.children,function(index,ao4){
																str+='<li>';
																str+='<div class="tree-children">';
																str+='<div>';
																if(ao4.isChildExist=='1'){
																	str+='<p class="tree-arrow cursor"><img src="'+basePath+'/static/org/img/icon_select_down.png"></p>';
																	str+='<p data-orgid="'+ao4.orgId+'">'+ao4.orgName+'</p>';
																}else{
																	str+='<p style="margin-left:8px" data-orgid="'+ao4.orgId+'">'+ao4.orgName+'</p>';
																}
																str+='</div>'
																str+='</div>';
																if(ao4.isChildExist=='1' && ao4.children!=null && ao4.children.length>0){
																	str+='<ul class="tree-four">';
																	$.each(ao4.children,function(index,ao5){
																		str+='<li>';
																		str+='<div class="tree-children">';
																		str+='<div>';
																		str+='<p style="margin-left:8px" data-orgid="'+ao5.orgId+'">'+ao5.orgName+'</p>';
																		str+='</div>'
																		str+='</div>';
																		str+='</li>';
																	})
																	str+='</ul>'
																}
																str+='</li>';
															})
															str+='</ul>'
														}
														str+='</li>';
													})
													str+='</ul>';
												}
												str+='</li>';
											})
											str+='</ul>';
										}
										str+='</li>';
									});
									str+='</ul>';
								}
								str+='';
							});
							$("div#org_div").each(function (i,v) {
								let that = this;
								$(that).html(str);

								$(that).prev().find('.add-mess-form-tree').on("click",function () {
									$(this).next().slideToggle();
								})

								$('.tree-one div.tree-children div p.tree-arrow',$(that)).on("click",function () {
									$(this).parent().parent('div.tree-children').next('ul').slideToggle(300);
									if ($(this).find('img').attr('src').indexOf('/static/img/icon_select_up.png') != -1) {
										$(this).find('img').attr('src', basePath+'/static/img/icon_select_down.png');
									} else {
										$(this).find('img').attr('src', basePath+'/static/img/icon_select_up.png');
									}
								})

								$('.tree-one div.tree-children div p:not(".tree-arrow")',$(that)).on("click",function () {
									$("input#search_orgNameInput").val($(this).text());
									var orgNo = $(this).data("orgid")
									$("input#search_orgIdInput").val(orgNo);
									$('.add-mess-form-tree').trigger("click");
									refresh();
								})


								$('div#select_user_root_node').on("click",function () {
									$('.add-mess-form-tree').trigger("click");
									$("input#search_orgNameInput").val($(this).data('orgname'));
									$("input#search_orgIdInput").val($(this).data("orgid"));
									refresh();
								})
							})
						}else{
							layer.msg("未获取到组织机构数据！");
						}
					}
				})
				//第一个实例
				table.render({
					elem: '#test',
					url: '../orderingRecords/getDetailsData',
					page: true ,
					method: "post",
					id:"test",
					request: {
						pageName: 'page',
						limitName: 'pageSize'
					},
					cols: [
						[
							{
								field: 'id',
								title: '主键id',
								hide: true
							}, {
								field: 'user_no',
								title: '用户编号',
								hide:true
							}, {
								type: 'numbers',
								title: '序号',
								fixed: 'left',
								width:50
							}, {
								field: 'org_name',
								title: '村/社区'
							}, {
								field: 'user_type',
								title: '人员类别'
							}, {
								field: 'user_name',
								title: '姓名'
							}, {
								field: 'age',
								title: '年龄',
							}, {
								field: 'food_date',
								title: '就餐日期',
								width:120
							}, {
								field: 'subsidy',
								title: '每餐补贴',
							}, {
								field: 'meals',
								title: '餐费',
							}, {
								field: 'delivery_fee',
								title: '配送费',
							}, {
								field: 'cost',
								title: '单价',
							}, {
								field: 'type',
								title: '就餐方式',
							}, {
								field: 'address',
								title: '配餐地址',
							}, {
								field: 'food_type',
								title: '餐别',
							}, {
								field: 'distribution_status',
								title: '状态',
							}, {
								field: 'confirm_time',
								title: '确认时间',
								width:120,
							}
						]
					],
					done: function (res, curr, count) {
						$("em#pageCount").text(count);
					}
				});

				$("p#searchButton").on("click",function (e) {
					refresh();
				})

				$("p#resetButton").on("click",function (e) {
					$("input#search_nameInput").val("");
					$("input#search_startDateInput").val("");
					$("input#search_endDateInput").val("");
					$("input#search_orgIdInput").val("");
					$("input#search_orgNameInput").val("");
					$("div.selectDiv p").removeClass("green");
					refresh();
				})

				/*$("div.selectDiv li").on("click",function (e) {
					$(this).addClass("current").siblings().removeClass("current");
				})*/

				function refresh(){
					let name = $("input#search_nameInput").val();
					let startDate = $("input#search_startDateInput").val();
					let endDate = $("input#search_endDateInput").val();
					let orgId = $("input#search_orgIdInput").val();
					let userType = "";
					if($("div#userTypeDiv p.green") && $("div#userTypeDiv p.green").length > 0){
						userType = $("div#userTypeDiv p.green").data("val");
					}
					let foodType = "";
					if($("div#foodTypeDiv p.green") && $("div#foodTypeDiv p.green").length > 0){
						foodType = $("div#foodTypeDiv p.green").data("val");
					}
					let orderStatus = "";
					if($("div#orderStatusDiv p.green") && $("div#orderStatusDiv p.green").length > 0){
						orderStatus = $("div#orderStatusDiv p.green").data("val");
					}
					table.reload("test", {
						where:{"name":name,"startDate":startDate,"endDate":endDate,"orgId":orgId,"userType":userType,"foodType":foodType,"orderStatus":orderStatus}
					});
				}
			});
			$("p.add-mess-form-tree").on("click",function (e) {
				$("div#org_div").slideToggle(300);
			})
			
			$('.more-date li p').click(function() {
				$(this).addClass('green').siblings().removeClass('green');
			})
			$('.btn-select').click(function() {
				if ($(this).find('img').attr('src').indexOf('img/select_icon_down.png') != -1) {
					$(this).find('img').attr('src', '../static/elderlyInfo/img/select_icon_up.png').siblings("span").text("收起");
				} else {
					$(this).find('img').attr('src', '../static/elderlyInfo/img/select_icon_down.png').siblings("span").text("展开");
				}
				$('.more-date ul').slideToggle(300);
			})
		</script>
	</body>

</html>
